import React, { Component } from 'react';
import '../styles/Shouye.scss'
import { NavBar, Space, Toast,Swiper,DotLoading } from 'antd-mobile'
import { SearchOutline, MoreOutline, RightOutline } from 'antd-mobile-icons'
import * as service from '../api/index'


class Shouye extends Component {
  constructor(props) {
    super(props)
    this.state = {
      right: (
        <div style={{ fontSize: 24 }}>
          <Space style={{ '--gap': '16px' }}>
            <SearchOutline />
            <MoreOutline />
          </Space>
        </div>
      ),
      lunbo:[],
      liebiao:[],
      jiaoshi:[],
      kecheng:[],
      huodong:[]
    }
  }
 async componentDidMount(){
   var res=await service.user_lunbo()
   var res1=await service.user_liebiao()
   var res2=await service.user_jiaoshi()
   var res3=await service.user_kecheng()
   var res4=await service.user_huodong()
   this.setState({lunbo:res.data,liebiao:res1.data,jiaoshi:res2.data,kecheng:res3.data,huodong:res4.data})
  }
  dianji(index){
    if(index==0){
      this.props.history.push('/index/kecheng')
    }else if(index==1){
      this.props.history.push('/jiaoyutoutiao')
    }else if(index==2){
      this.props.history.push('/feixianghd')
    }else{
      this.props.history.push('/zixunjiaoshi')

    }

  }
  render() {
    return (
      <div className='shouye'>
        <NavBar backArrow={false} right={this.state.right}>
          首页
        </NavBar>
        <div className="nei">
        <div className="lunbo">
          <Swiper autoplay loop autoplayInterval={1500}>
                      {
                          this.state.lunbo.map((item,index)=>{
                              return (
                                  <Swiper.Item key={index}>
                                      <img src={item.pic} alt="" />
                                  </Swiper.Item>
                              )
                          })
                      }
          </Swiper>
        </div>
        <div className="libiao">
          {
            this.state.liebiao.map((item,index)=>{
              return (
                <div key={index} className="lbiao" onClick={()=>{this.dianji(index)}}>
                  <div className='ltu'><img src={item.pic} alt="" /></div>
                  <div className='lzi'>{item.name}</div>

                </div>
              )
            })
          }
        </div>
        <div className="hang">
          <div className="han">
            <span className='h1'>明星教师</span>
            <span className='h2' onClick={()=>{this.props.history.push('/zixunjiaoshi')}}>更多<RightOutline /></span>
          </div>
          <div className="han1">
            {
              this.state.jiaoshi.map((item,index)=>{
                return (
                  <div className='kuan' key={index} onClick={()=>{this.props.history.push('/jiaoshijieshao')}}>
                    <img src={item.pic} alt="" />
                    <div className='hname'>{item.name}</div>
                    <div>{item.kecheng}</div>
                  </div>
                )
              })

            }
          </div>
        </div>
        <div className="hang2">
          <div className="han">
            <span className='h1'>热门课程</span>
            <span className='h2' onClick={()=>{this.props.history.push('/index/kecheng')}}>更多<RightOutline /></span>
          </div>
          <div className="han1">
            {
              this.state.kecheng.map((item,index)=>{
                return (
                  <div className="item" key={index} onClick={()=>{this.props.history.push('/kechengxx')}}>
                    <div className="d1">
                      <div>{item.text}</div>
                      <div className='text1'>{item.text1}</div>
                      <span><img src={item.pic} alt="" /></span>
                    </div>
                    <div className='name'>{item.name}</div>
                    <div className='jiage'><span>¥</span>{item.jiage}</div>
                  </div>
                )
              })
            }
          </div>
        </div>
        <div className="hang3">
          <div className="han">
            <span className='h1'>热门活动</span>
            <span className='h2' onClick={()=>{this.props.history.push('/feixianghd')}}>更多<RightOutline /></span>
          </div>
          <div className="han1">
            {
              this.state.huodong.map((item,index)=>{
                return (
                  <div className='item' key={index} onClick={()=>{this.props.history.push('/houdongxx')}}>
                    <div className='pic'><img src={item.pic} alt="" /></div>
                    <div className='pi'>
                      <div className='name'>{item.name}</div>
                      <div className='xian'>
                        <span className={item.status==2?'active':item.status==3?'active1':''}>{item.text}</span>
                        <span>{item.text1}</span>
                      </div>
                    </div>
                  </div>

                )
              })
            }
          </div>
        </div>
        <div style={{ color: 'rgb(211, 208, 208)' }} className='load'>
          <DotLoading color='currentColor' />
          <span>数据正在加载中</span>
        </div>
        </div>
      </div>
    );
  }
}

export default Shouye;